<!--分页组件-->
<template>
  <Page
      style="display: flex;flex-direction: row;justify-content: end;margin: 8px 16px"
      show-total
      show-elevator
      show-sizer
      size="small"
      :page-size='currentPageSize'
      :page-size-opts="[20, 30, 40, 50]"
      @on-page-size-change="changePageSize"
      @on-change="changePageIndex"
  />
</template>
<script setup>
import {ref} from 'vue'
const emit=defineEmits(['changeComplete'])
const currentPageSize=ref(20)
function changePageIndex(v){
  console.log(v)
  emit('changeComplete',{
    pageIndex:v,
    pageSize:currentPageSize.value
  })
}
function changePageSize(v){
  console.log(v)
  currentPageSize.value=v
  emit('changeComplete',{
    pageIndex:1,
    pageSize:v
  })

}
</script>
<style scoped>

</style>